<template>
  <div>
    <el-card class="box-card">
      <!-- 面包屑导航 -->
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
          <el-breadcrumb-item active>入库</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 添加按钮 -->
      <el-button
        type="success"
        style="margin-top: 30px"
        @click="addDialogVisible = true"
        >创建订单</el-button
      >
      <!-- 搜索 -->
      <div class="search_box">
        <div class="search">
          <el-select
            v-model="search.right"
            placeholder="请选择仓库"
            style="margin-right: 10px"
          >
            <el-option
              v-for="item in datastorelist"
              :key="item.store_id"
              :label="item.store_name"
              :value="item.store_id"
            >
            </el-option>
          </el-select>
          <el-input v-model="search.left" placeholder="请输入订单号"></el-input>
          <!-- <el-input
            v-model="search.right"
            placeholder="请输入联系人"
          ></el-input> -->
          <el-button plain @click="searchclick">搜索</el-button>
          <el-button type="warning" plain @click="clearinput">重置</el-button>
        </div>
      </div>
      <el-table
        :data="datalist"
        height="500"
        row-key="pid"
        border
        style="width: 100%; margin-top: 30px; height: 100%"
      >
        <el-table-column prop="pid" label="订单编号" width="100">
        </el-table-column>
        <el-table-column prop="put_data" label="订单时间" width="250">
        </el-table-column>
        <el-table-column prop="store[0].store_name" label="仓库名称">
        </el-table-column>
        <el-table-column prop="goods[0].goods_name" label="商品名称">
        </el-table-column>
        <el-table-column prop="put_sum" label="入库量"> </el-table-column>
        <el-table-column prop="supply[0].supply_address" label="发货地">
        </el-table-column>
        <el-table-column prop="put_rmb" label="进货价格"> </el-table-column>
        <el-table-column prop="goods[0].goods_specs" label="规格">
        </el-table-column>
        <el-table-column prop="goods[0].remark" label="备注"> </el-table-column>
        <el-table-column prop="user[0].username" label="操作员">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              @click="deleteDialog(scope.row)"
              icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加按钮 -->
    <el-dialog
      title="添加订单"
      :visible.sync="addDialogVisible"
      width="30%"
      center
      :before-close="clearDialog"
    >
      <el-form :model="form" class="demo-ruleForm">
        <el-form-item label="供应商" prop="pass">
          <el-select
            v-model="supply"
            placeholder="请选择供应商"
            @change="selectgoods"
          >
            <el-option
              v-for="item in datasupplylist"
              :key="item.sid"
              :label="item.supply_name"
              :value="item.sid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品" prop="pass">
          <el-select v-model="form.goods_id" placeholder="请选择商品">
            <el-option
              v-for="item in goodslist"
              :key="item.gid"
              :label="item.goods_name"
              :value="item.gid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库" prop="pass">
          <el-select v-model="form.store_id" placeholder="请选择仓库">
            <el-option
              v-for="item in datastorelist"
              :key="item.store_id"
              :label="item.store_name"
              :value="item.store_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出售价格" prop="pass">
          <el-input v-model="form.put_rmb" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="入库数量" prop="pass">
          <el-input v-model="form.put_sum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearDialog">取 消</el-button>
        <el-button type="primary" @click="addputclick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { searchgoods, addput, delput, searchput } from "../../http/api";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      // datalist: [],
      //   添加提示框
      addDialogVisible: false,
      editDialogVisible: false,
      //供应商
      supply: "",
      //选择商品列表
      goodslist: [],
      form: {
        store_id: "",
        goods_id: "",
        put_sum: "",
        put_rmb: "",
        user_id: "",
        is_del: 0,
      },
      search: {
        left: "",
        right: "",
      },
    };
  },
  created() {
    this.getputlist();
    this.getsupplylist();
    this.getstorelist();
  },
  methods: {
    ...mapActions({
      getputlist: "put/getputlistActions",
      getsupplylist: "supply/getsupplylistActions",
      getstocklist: "home/getstocksumlistActions",
      getstorelist: "store/getstorelistActions",
    }),
    //更换供应商
    selectgoods() {
      let that = this;
      // console.log(this.form);
      searchgoods({ left: "", right: this.supply }).then((res) => {
        if (res.status == 201) {
          this.goodslist = res.data;
          //   that.$message.success(res.message);
        } else {
          that.$message.error(res.message);
        }
      });
    },
    //添加订单
    addputclick() {
      this.form.user_id = this.user.username.uid;
      let that = this;
      addput(this.form).then((res) => {
        if (res.status == 201) {
          //   that.datalist = res.data;
          that.$message.success(res.message);
          that.getputlist();
          this.getstocklist()
        } else {
          console.log(res);
          that.$message.error(res.message);
        }
      });

      this.clearDialog();
    },
    //删除订单
    deleteDialog(data) {
      let that = this;
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delput(data).then((res) => {
            if (res.status == 201) {
              //   that.datalist = res.data;
              that.$message.success(res.message);
              that.getputlist();
            } else {
              console.log(res);
              that.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    clearDialog() {
      (this.addDialogVisible = false),
        (this.form = {
          store_id: "",
          goods_id: "",
          put_sum: "",
          put_rmb: "",
          user_id: "",
          is_del: 0,
        });
      this.supply = "";
    },
    //重置清空
    clearinput() {
      this.search = {
        left: "",
        right: "",
      };
      this.getputlist();
    },
        //搜索商品
    searchclick(){
 let that = this;
      searchput(this.search).then((res) => {
        if (res.status == 201) {
          console.log(res);
          //   that.datalist = res.data;
          that.$message.success(res.message);
          that.$store.commit("put/changeputlist",res.data)
        } else {
          console.log(res);
          that.$message.error(res.message);
        }
      });
    }
  },
  computed: {
    ...mapGetters({
      datalist: "put/datalist",
      datasupplylist: "supply/datalist",
      datastorelist: "store/datalist",
      user: "login/user",
    }),
  },
};
</script>

<style lang="less" scoped>
.el-form{
  width: 40%;
  // margin: 0 auto;
}
.search {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .el-input {
    width: 50%;
    margin-right: 10px;
  }
  margin-bottom: 10px;
}
.search_box {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>